<template>
  <div class="user-oriented">
    <div class="w-300 pb-5">
      <div class="w-full pt-10 pl-8 text-xl"><strong>面向用户</strong></div>
    </div>
    <div class="flex w-300 space-x-4">
      <div class="flex-1 h-125 business">
        <div class="flex flex-col justify-center items-center">
          <div class="leading-8">
            <div class="text-base font-bold">业务人员</div>
            <div>不懂代码、无软件研发背景的业务人员</div>
            <div>
              <el-space>
                <bt-button size="small">搭建简单</bt-button>
                <bt-button size="small">快速配置</bt-button>
                <bt-button size="small">平滑升级</bt-button>
              </el-space>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 h-125 specialty">
        <div class="flex flex-col justify-center items-center">
          <div class="leading-8">
            <div class="text-base font-bold">专业人员</div>
            <div>对行业理解深刻，有丰富的业务经验</div>
            <div>
              <el-space>
                <bt-button size="small">业务组件</bt-button>
                <bt-button size="small">页面二次开发</bt-button>
                <bt-button size="small">平滑升级</bt-button>
              </el-space>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 h-125 dev">
        <div class="flex flex-col justify-center items-center">
          <div class="leading-8">
            <div class="text-base font-bold">开发人员</div>
            <div>对程序开发流程、以及前后端技术了解</div>
            <div>
              <bt-button size="small">模板项目</bt-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.user-oriented {
  color: #ffffff;
  .business {
    padding-top: 250px;
    font-size: 14px;
    background: url('@/assets/images/profile/customer-business.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .specialty {
    padding-top: 250px;
    font-size: 14px;
    background: url('@/assets/images/profile/customer-specialty.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .dev {
    padding-top: 250px;
    font-size: 14px;
    background: url('@/assets/images/profile/customer-dev.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
